import RowButton from "@/components/Global/CustomButton/RowButton";
import React from "react";
import { View, Text, StyleSheet, ScrollView } from "react-native";
import { router } from "expo-router";
import { useTheme } from "@/contexts/ThemeContext";

interface SettingsListGroup {
  title: string;
  data: SettingsListItemProps[];
}

interface SettingsListItemProps {
  text: string;
  icon: any;
  route: string;
}

const groupedSettings: SettingsListGroup[] = [
  {
    title: "设置",
    data: [
      {
        text: "账号与安全",
        icon: "shield-checkmark-outline",
        route: "/settings/account",
      },
      {
        text: "聊天设置",
        icon: "chatbubble-ellipses-outline",
        route: "/settings/chat",
      },
      {
        text: "数据管理",
        icon: "cloud-upload-outline",
        route: "/settings/storage",
      },
    ],
  },
  {
    title: "外观",
    data: [
      {
        text: "主题设置",
        icon: "color-palette-outline",
        route: "/settings/theme",
      },
    ],
  },
  {
    title: "隐私",
    data: [
      {
        text: "隐私设置",
        icon: "lock-closed-outline",
        route: "/settings/privacy",
      },
      {
        text: "通知管理",
        icon: "notifications-outline",
        route: "/settings/notifications",
      },
    ],
  },
  {
    title: "实验性功能",
    data: [
      {
        text: "AI助手",
        icon: "sparkles-outline",
        route: "/settings/ai-assistant",
      },
    ],
  },
];

export default function SettingsList() {
  const { colors } = useTheme();

  return (
    <ScrollView
      style={[styles.container, { backgroundColor: colors.backgroundLight }]}
      showsVerticalScrollIndicator={false}
    >
      {groupedSettings.map((group, groupIndex) => (
        <View key={groupIndex} style={styles.group}>
          <Text style={[styles.groupTitle, { color: colors.text.secondary }]}>
            {group.title}
          </Text>
          <View
            style={[
              styles.card,
              {
                backgroundColor: colors.card.background,
                borderColor: colors.border.divider,
                shadowColor: colors.card.shadow,
              },
            ]}
          >
            {group.data.map((item: SettingsListItemProps, index: number) => (
              <RowButton
                key={index}
                text={item.text}
                icon={item.icon}
                onPress={() => {
                  router.navigate(item.route);
                }}
                isLast={index === group.data.length - 1}
              />
            ))}
          </View>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 16,
  },
  group: {
    marginBottom: 24,
    paddingHorizontal: 16,
  },
  groupTitle: {
    fontSize: 15,
    fontWeight: "500",
    marginBottom: 10,
    marginLeft: 8,
  },
  card: {
    borderRadius: 12,
    overflow: "hidden",
    borderWidth: 1,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 3,
    elevation: 2,
  },
});
